<template>
  <div class="content">
    <div>
      <!-- 职业百科 -->
      <div class="page-title-wrap">
        <h1 class="title">职业百科</h1>
        <p class="count-info">
          BOSS职业百科词条已收录<span class="count-num">1016</span>个职业
        </p>
        <p class="page-sub-title">
          快速了解不同职业的晋升之路、薪资待遇，更有转行数据及热议问答，助你轻松入行。
        </p>
        <div class="search-input-wrap">
          <input type="text" placeholder="搜索职位" />
          <button class="search-btn">搜索</button>
        </div>
      </div>
      <!-- 与你相关 -->
      <el-card class="correlation-card" shadow="naver">
        <h2 class="section-title">与你相关</h2>
        <div class="position-card">
          <div class="img-icon">
            <img
              src="https://img.bosszhipin.com/beijin/cms/8838222f608e9b6520f56fe9a253e35e027484c2e750486e40f66c89b4a04eada0d2a0e7df064d6ab652342b7e2977b0.png"
              alt=""
            />
          </div>
          <div class="web">
            <div class="web-title">Web 前端工程师</div>
            <div class="web-desc">
              工作内容 | 常用工具 | 入行经验 | 推荐书籍
            </div>
          </div>
        </div>
      </el-card>
      <!-- 职业榜单 -->
      <div class="hotlist-section">
        <h2 class="section-title">职业榜单</h2>
        <div class="list-pager-wrap">
          <ul class="career-list-wrap">
            <li v-for="job1 in jobList" :key="job1.id">
              <div class="baike-hot-list-item">
                <div class="list-header">
                  <div class="list-header-icon">
                    <img :src="job1.icon" alt="" />
                  </div>
                  <span class="list-title">{{ job1.title }}</span>
                </div>
                <div class="list-container">
                  <div class="wrap">
                    <ul v-for="(job2, index) in job1.jobItem" :key="job2.id">
                      <li class="list-item">
                        <span class="index">{{ index + 1 }}</span>
                        <div class="info">
                          <a
                            href="https://baike.zhipin.com/wiki/s0ac3daa93b4ee7011XN4/"
                            >{{ job2.name }}</a
                          >
                          <div class="sub-title">
                            <span>{{ job2.content }}</span>
                            <div class="percentage">{{ job2.percentage }}</div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 职业探秘 -->
      <div class="explore-section">
        <Job :jobImgList="jobImgList" :jobTitle="jobTitle[0]"></Job>
      </div>
      <!-- 职业故事 -->
      <div class="story-section">
        <Job1 :jobVideoImgList="jobVideoImgList" :jobTitle="jobTitle[1]"></Job1>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../../components/Footer/index.vue'
import Job from './components/Job.vue'
import Job1 from './components/Job1.vue'
import {
  reqImgUrlList,
  reqGetJobList,
  reqGetJobVideoImg,
} from '@/api/encyclopedia'
export default {
  name: 'MyEncyclopedia',
  components: {
    Footer,
    Job,
    Job1,
  },
  data() {
    return {
      jobTitle: ['职业探秘', '职业故事'],
      jobList: [
        {
          id: '',
          icon: '',
          title: '',
          jobItem: [
            {
              id: '',
              name: '',
              content: '',
            },
          ],
        },
      ],
      jobImgList: [],
      jobVideoImgList: [],
    }
  },
  methods: {
    async getJobList() {
      const result = await reqGetJobList()
      this.jobList = result
    },
    async getJobVideoImgList() {
      const result = await reqGetJobVideoImg()
      this.jobVideoImgList = result
    },
  },
  async mounted() {
    const result = await reqImgUrlList()
    this.jobImgList = result
    this.getJobList()
    this.getJobVideoImgList()
  },
}
</script>

<style lang="less" scoped>
.content {
  background-color: #f7f8fa;
}
.title {
  height: 45px;
  line-height: 45px;
  text-align: center;
  margin-bottom: 20px;
  padding-top: 20px;
}
.count-info {
  font-size: 18px;
  font-weight: 500;
  color: #12141a;
  line-height: 25px;
  margin-bottom: 8px;
  text-align: center;
}
.page-sub-title {
  text-align: center;
  font-size: 14px;
  color: #737680;
  margin-bottom: 30px;
}
.search-input-wrap {
  text-align: center;
}
.count-num {
  color: #00b88f;
  margin: 0 8px;
}
.search-input-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
  input {
    width: 600px;
    height: 50px;
    padding: 0 24px;
    font-size: 18px;
    border-radius: 8px 0 0 8px;
    border: 1px solid #e6e8eb;
    background: #fff;
    color: #12141a;
    box-sizing: border-box;
  }
  input:focus {
    outline: none;
    border: 1px solid #00b8bf;
    box-shadow: 0 0 1px 3px rgb(0 0 0 / 5%);
  }
  input::-webkit-input-placeholder {
    /* WebKit browsers 适配谷歌 */
    color: #bdcada;
  }
}
.search-btn {
  width: 120px;
  height: 50px;
  border: none;
  outline: none;
  font-size: 20px;
  background-color: #00b8bf;
  color: #fff;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
}
.hotlist-section {
  background-color: #fff;
  width: 1200px;
  margin: 0 auto;
  border-radius: 9px;
  padding: 24px;
  box-sizing: border-box;
}
.section-title {
  margin-bottom: 24px;
}
.list-pager-wrap {
  margin-bottom: 10px;
}
.career-list-wrap {
  display: flex;
}
.baike-hot-list-item {
  border: 1px solid #e8e9eb;
  width: 270px;
  margin-right: 22px;
  border-radius: 8px;
}
.list-header {
  padding: 16px 16px 8px;
  display: flex;
}
.list-header-icon {
  img {
    width: 22px;
    height: 23px;
    margin-right: 8px;
    line-height: 23px;
    text-align: center;
    margin-top: 3px;
  }
}
.list-title {
  font-size: 18px;
  font-weight: 600;
  color: #727680;
  line-height: 28px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.list-item {
  padding: 8px 0 8px 16px;
  display: flex;
  .index {
    margin: 0 12px 0 6px;
  }
  .info {
    a {
      font-size: 16px;
      font-weight: 500;
      color: #13151b;
    }
    .sub-title {
      margin-top: 5px;
      font-size: 13px;
      color: #a2a5b3;
      padding-right: 16px;
    }
  }
}
.wrap {
  height: 304px;
  overflow: hidden;
}
.list-container {
  height: 313px;
}
.wrap:hover {
  overflow: auto;
  overflow-y: overlay;
}
.wrap::-webkit-scrollbar {
  width: 5px;
  background-color: rgb(241, 241, 241);
}
.wrap::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(221, 221, 221, 0.8);
}
.list-item:hover {
  cursor: pointer;
  background-color: #f2f3f5;
}
.percentage {
  color: red;
  margin-left: 8px;
}
.correlation-card {
  width: 1200px;
  margin: 0 auto;
  border-radius: 8px;
  margin-bottom: 20px;
  background-color: #fff;
  color: #000;
}

.position-card {
  width: 368px;
  height: 83px;
  background: #f9fafc;
  border-radius: 8px;
  margin: 0 24px 24px 0;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all ease-in-out 0.2s;
  transition: all 0.2s ease-in-out;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  float: left;
}
.img-icon {
  img {
    width: 40px;
    height: 40px;
    margin: 21px 16px 21px 24px;
  }
}
.web-title {
  font-size: 18px;
  font-weight: 500;
  color: #12141a;
  line-height: 25px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.web-desc {
  height: 17px;
  font-size: 13px;
  margin-top: 8px;
  font-weight: 400;
  color: #747680;
  line-height: 17px;
}
</style>
